<template>
	<div class="box">
		<div class="title_box">
			<div class="title_box_left">
				<img src="@/assets/home/title-icon.png" alt="">
				<p>资讯详情</p>
			</div>
		</div>
		<div class="popDetail">
			<div style="margin-bottom: 20px;width: 100%;display: flex;justify-content: flex-end;">
				<span @click="goback" style="cursor: pointer;">返回</span>
			</div>
			<h2>{{dataList.list.newTitle}}</h2>
			<p v-html="dataList.list.newContent"></p>
		</div>
	</div>
</template>

<script setup>
	import { getNewByUuid } from '../../api/home.js'
	import {
		reactive,
		onBeforeMount
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		list:''
	})
	onBeforeMount(() => {
		getDetail(router.currentRoute.value.query.id)
	})
	const getDetail = (id) => {
		console.log(id,"1111111111111")
		var data = {
			params: id
		}
		getNewByUuid(data).then(res=> {
			console.log(res)
			dataList.list = res.data
		})
	}
	const goback = () => {
		router.back()
	}
</script>

<style lang="scss" scoped>
	.title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		&_left {
			display: flex;
			align-items: center;
	
			img {
				width: 55px;
			}
	
			p {
				font-size: 34px;
				font-weight: 600;
				color: #11918E;
				margin-left: 10px;
			}
		}
	}
	.box{
		width: 1200px;
		margin: 30px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-top: 30px;
		min-height: 430px;
	}
	.popDetail{
		h2{
			width: 100%;
			text-align: center;
			margin-bottom: 30px;
		}
		:deep(img){
			width: 100%;
		}
	}
</style>